<template>
    <custom-page-box>
        <div class="item-box">
            <a-tabs v-model="activeKey">
                <a-tab-pane key="1" tab="公司资料" disabled> </a-tab-pane>
                <a-tab-pane key="2" tab="资质证书" disabled> </a-tab-pane>
                <a-tab-pane key="3" tab="专家人才">
                    <a-form-model :model="form" :rules="formRules" ref="ruleForm">
                        <a-form-model-item label="姓名" prop="name">
                            <a-input v-model="form.name" :maxLength="10" placeholder="请输入姓名(10个字以内)" />
                        </a-form-model-item>
                        <a-form-model-item label="专家类型" prop="type">
                            <a-select v-model="form.type" placeholder="请选择专家类型">
                                <a-select-option :value="1"> 技术专家 </a-select-option>
                                <a-select-option :value="2"> 行业专家 </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <!-- <a-form-model-item label="头衔">
                            <a-input
                                v-model="form.title"
                                :maxLength="10"
                                placeholder="请输入头衔(10个字以内)"
                            />
                        </a-form-model-item> -->
                        <a-form-model-item class="label-text">
                            <div slot="label">
                                标签
                                <a-popover v-model="visible" trigger="click" placement="right">
                                    <template slot="content">
                                        <img src="@/assets/images/company-item.jpg" alt="" />
                                    </template>
                                    <a-icon type="question-circle" class="green" />
                                </a-popover>
                            </div>
                            <AddLbael
                                v-model="form.label"
                                :max="5"
                                :minLabel="2"
                                :maxLength="10"
                                isIcon="plus"
                                :isShow="true"
                            />
                        </a-form-model-item>
                        <a-form-model-item label="年龄" prop="age">
                            <a-input v-model.number="form.age" placeholder="请输入年龄" />
                        </a-form-model-item>
                        <a-form-model-item label="技术职称">
                            <a-input
                                v-model="form.technicalTitles"
                                :maxLength="10"
                                placeholder="请输入技术职称(10个字以内)"
                            />
                        </a-form-model-item>
                        <!-- <a-form-model-item label="职位" prop="position">
                            <a-input
                                v-model="form.position"
                                :maxLength="10"
                                placeholder="请输入当前在公司职位(10个字以内)"
                            />
                        </a-form-model-item> -->
                        <a-form-model-item label="学历">
                            <a-select v-model="form.education" placeholder="请选择学历">
                                <a-select-option value="小学"> 小学 </a-select-option>
                                <a-select-option value="初中"> 初中 </a-select-option>
                                <a-select-option value="高中"> 高中 </a-select-option>
                                <a-select-option value="中专"> 中专 </a-select-option>
                                <a-select-option value="大专"> 大专 </a-select-option>
                                <a-select-option value="本科"> 本科 </a-select-option>
                                <a-select-option value="研究生"> 研究生 </a-select-option>
                                <a-select-option value="博士"> 博士 </a-select-option>
                                <a-select-option value="博士后"> 博士后 </a-select-option>
                                <a-select-option value="教授"> 教授 </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="个人照" prop="img">
                            <p slot="extra" class="tips">
                                支持上传jpe、jpeg、png <br />仅支持上传1张，图片不超过2M，尺寸为200*200
                            </p>
                            <custom-cropper-image
                                :width="200"
                                :height="200"
                                :path="path"
                                v-model="form.img"
                                :max="1"
                                :fileSize="2"
                            ></custom-cropper-image>
                        </a-form-model-item>
                        <a-form-model-item label="个人介绍视频">
                            <p slot="extra" class="tips">仅支持上传一段视频，视频大小不超过50M</p>
                            <custom-video-upload
                                v-model="form.videoList"
                                path="/company-certification/video/"
                            ></custom-video-upload>
                        </a-form-model-item>
                        <a-form-model-item label="案例">
                            <a-select v-model="form.caseIdList" mode="multiple" placeholder="请选择案例">
                                <a-select-option v-for="item in caseList" :key="item.id">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="个人介绍" prop="description" class="text">
                            <a-textarea
                                placeholder="请输入个人介绍"
                                allow-clear
                                :maxLength="500"
                                v-model="form.description"
                                rows="8"
                                cols="33"
                            />
                            <span class="limit">{{ getLimit }}</span>
                        </a-form-model-item>

                        <a-form-model-item class="btn">
                            <a-button @click="goBack"> 返回 </a-button>
                            <a-button @click="onSubmit"> 提交 </a-button>
                        </a-form-model-item>
                    </a-form-model>
                </a-tab-pane>
            </a-tabs>
        </div>
    </custom-page-box>
</template>

<script>
import AddLbael from '@/components/add-label'
const validateAge = (rule, value, callback) => {
    if (value) {
        if (!Number.isInteger(value)) {
            callback(new Error('年龄应为正整数'))
        } else if (value < 1) {
            callback(new Error('年龄应为正整数'))
        } else if (value > 150) {
            callback(new Error('请输入正确的年龄'))
        } else {
            callback()
        }
    } else {
        callback()
    }
}
export default {
    name: 'AddTeam',
    components: {
        AddLbael
    },
    data () {
        return {
            activeKey: '3',
            typeList: ['image/jpeg', 'image/png', 'image/bmp'],
            path: '/company-certification/img/',
            form: {
                name: '',
                // position: '',
                technicalTitles: '',
                // title: '',
                type: '',
                label: [],
                img: [],
                videoList: {
                    videoUrl: '',
                    imgCoverUrl: ''
                },
                caseIdList: [],
                education: undefined,
                age: '',
                description: ''
            },
            formRules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }
                ],
                age: [
                    {
                        validator: validateAge,
                        trigger: 'change'
                    }
                ],
                type: [
                    {
                        required: true,
                        message: '请选择专家类型',
                        trigger: 'change'
                    }
                ],
                // position: [
                //     {
                //         required: true,
                //         message: '请输入当前在公司职位',
                //         trigger: 'blur'
                //     }
                // ],
                img: [
                    {
                        required: true,
                        message: '请上传个人照',
                        trigger: 'change'
                    }
                ],
                description: [
                    {
                        required: true,
                        message: '请输入个人介绍',
                        trigger: 'change'
                    }
                ]
            },
            visible: false,
            caseList: []
        }
    },
    computed: {
        getLimit () {
            return this.form.description.length + '/' + 500
        }
    },
    mounted () {
        this.getCaseList()
        if (this.$route.query.id) {
            this.getInfoList()
        }
    },
    methods: {
        async getInfoList () {
            const res = await this.$ApiServer['company/team/detail']({
                id: this.$route.query.id
            })
            if (res.code === 200) {
                this.form.age = res.data.age
                this.form.description = res.data.description
                this.form.education = res.data.education
                this.form.img = res.data.img.split(',')
                this.form.label = res.data.label.length
                    ? res.data.label.split(',').map((item) => {
                        return {
                            name: item
                        }
                    })
                    : []
                this.form.name = res.data.name
                this.form.videoList.videoUrl = res.data.videoUrl
                this.form.technicalTitles = res.data.technicalTitles
                this.form.videoList.imgCoverUrl = res.data.imgCoverUrl
                this.form.type = res.data.type
                this.form.caseIdList = res.data.caseIdList.length ? res.data.caseIdList : []
            }
        },
        async getCaseList () {
            const res = await this.$ApiServer['company/case/list']()
            if (res.code === 200) {
                this.caseList = res.data
            }
        },
        goBack () {
            sessionStorage.setItem('activeKey', '3')
            this.$router.go(-1)
        },
        onSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    const {
                        age,
                        description,
                        caseIdList,
                        education,
                        name,
                        // position,
                        technicalTitles,
                        // title,
                        type
                    } = this.form
                    const { imgCoverUrl, videoUrl } = this.form.videoList
                    const lableName = this.form.label.map((item) => {
                        return item.name
                    })
                    this.$ApiServer['company/team/submit']({
                        age,
                        description,
                        caseIdList,
                        education,
                        name,
                        // position,
                        technicalTitles,
                        // title,
                        type,
                        imgCoverUrl,
                        videoUrl,
                        id: this.$route.query.id || '',
                        img: this.form.img.join(','),
                        label: lableName.join(',')
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message.success('添加成功')
                            sessionStorage.setItem('activeKey', '3')
                            this.$router.push({
                                name: 'company-manage-company-info'
                            })
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.item-box {
    width: 100%;
    height: 100%;
    background-color: #ffff;
    overflow-y: scroll;
    .ant-tabs {
        ::v-deep {
            .ant-tabs-extra-content {
                margin-right: 0.3rem;
                button {
                    background-color: @primary-color;
                }
            }
        }
    }
    .ant-form {
        width: 100%;
        height: 100%;
        ::v-deep {
            .ant-form-item {
                display: flex;
                .ant-form-item-label {
                    width: 2rem;
                    text-align: right;
                    color: #333333;
                    font-size: 0.16rem;
                }
                .ant-form-item-control-wrapper {
                    min-width: 2.3rem;
                    .ant-form-item-children {
                        position: relative;
                        .limit {
                            position: absolute;
                            bottom: 0rem;
                            right: 0.1rem;
                        }
                    }
                    .tips {
                        font-size: 12px;
                        color: #666666;
                    }
                }
                &.text {
                    .ant-form-item-control-wrapper {
                        width: 5rem;
                    }
                }
                &.label-text {
                    .ant-form-item-control-wrapper {
                        width: 6.3rem;
                        .badge-delete-box {
                            max-height: auto;
                            margin-top: 0.06rem;
                        }
                        .add-label-input.ant-input-group-wrapper {
                            width: 6rem;
                        }
                        .ant-form-item-control {
                            display: flex;
                            align-items: center;
                            position: relative;
                            .add-label-input button {
                                width: 100px;
                                color: @primary-color;
                                text-align: center;
                                padding: 0;
                                &:hover {
                                    border-color: inherit;
                                }
                            }
                            .ant-form-extra {
                                position: absolute;
                                right: 0;
                                top: 0.1rem;
                                i {
                                    color: @primary-color;
                                    font-size: 0.16rem;
                                }
                            }
                        }
                    }
                }
                .has-error {
                    .ant-upload.ant-upload-select.ant-upload-select-picture-card {
                        border-color: @primary-color !important;
                        .anticon-cloud-upload svg {
                            color: @primary-color !important;
                        }
                        .ant-upload-text {
                            color: @primary-color !important;
                        }
                    }
                }
                textarea {
                    width: 5rem;
                    resize: none;
                }
                .clearfix {
                    width: 2rem;
                    height: 1.4rem;
                    .ant-upload.ant-upload-select.ant-upload-select-picture-card {
                        width: 2rem;
                        height: 1.4rem;
                        background-color: #ffffff;
                        border-color: #d4d4d4;
                        &:hover {
                            border-color: @primary-color;
                            border-style: solid;
                            .anticon-cloud-upload svg {
                                color: @primary-color;
                            }
                            .ant-upload-text {
                                color: @primary-color;
                            }
                        }
                        .anticon-cloud-upload svg {
                            width: 0.42rem;
                            height: 0.3rem;
                            color: #999999;
                        }
                        .ant-upload-text {
                            color: #999999;
                            font-size: 0.14rem;
                        }
                    }
                    .ant-upload-list-picture-card-container {
                        width: 2rem;
                        height: 1.4rem;
                    }
                    .ant-upload-list-picture-card .ant-upload-list-item {
                        width: 2rem;
                        height: 1.4rem;
                        padding: 0;
                    }
                }
                &.btn {
                    padding-left: 2rem;
                    margin-top: 0.3rem;
                    button:nth-child(1) {
                        width: 0.9rem;
                        background-color: #fff;
                        border-color: @primary-color;
                        color: @primary-color;
                    }
                    button:nth-child(2) {
                        margin-left: 0.2rem;
                        width: 0.9rem;
                        background-color: @primary-color;
                        color: #ffffff;
                        box-shadow: none;
                    }
                }
            }
        }
    }
}
.green {
    color: @primary-color;
    margin-right: 3px;
}
::v-deep {
    .ant-upload.ant-upload-select-picture-card {
        border-style: solid;
    }
    .ant-form-item-children {
        & > div > span > span {
            display: flex;
            align-items: center;
            button {
                height: 32px;
            }
        }
    }
}
</style>
